<template>
  <div class="album fill">
    <div class="infosArea flex-row pl w-fill" v-if="albumDetail.singer">
      <WIcon :icon="albumDetail.cover" size="200" :border-radius="10"/>
      <div class="content mll flex-1 flex-col justify-between">
        <div class="title">{{ albumDetail.name }}</div>
        <div class="singerName"><SingerDisplay :singer="albumDetail.singer"/></div>
        <div class="company flex-col text-info">
          <div>{{albumDetail.publishTime}}</div>
          <div>{{albumDetail.company}}</div>
        </div>
        <div class="ctrl flex-row">
          <div class="btn" @click="handlePlay">
            <WIcon icon="icon-play-all"/>
            播放全部
          </div>
          <div class="btn" @click="handleToggleLike">
            <ILike :like="isLike"/>{{isLike?"取消收藏":"收藏"}}
          </div>
        </div>
      </div>
    </div>
    <ul class="nav flex-row">
      <li @click="nav.activeLabel = item.label" v-for="item in nav.list" :key="item.label"
          :class="{active: item.label===nav.activeLabel}">
        <span>{{ item.label }}{{ item.count ? item.count : "" }}</span></li>
    </ul>
    <div class="list" v-show="nav.activeLabel==='歌曲'">
      <ListDisplay ref="list"  :list="songList"/>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from "vue-property-decorator";
import {Path} from "@/ts.d/interfaces/Path";
import {qqMusicApi} from "@/network/qqmusic";
import {AlbumDetail} from "@/ts.d/classes/AlbumDetail";
import WIcon from "@/components/icon/WIcon.vue";
import ILike from "@/components/icon/ILike.vue";
import ListDisplay from "@/components/listDisplay/ListDisplay.vue";
import {Song} from "@/ts.d/classes/Song";
import SingerDisplay from "@/components/listDisplay/SingerDisplay.vue";
import {Action, State} from "vuex-class";
import {AlbumItem} from "@/ts.d/classes/AlbumItem";

@Component({
  components: {SingerDisplay, ListDisplay, ILike, WIcon}
})
export default class Album extends Vue {
  @State("like")  like!: {album: AlbumItem[]}

  @Action("toggleLike") toggleLike !: (payload: {type: "album"; item: AlbumItem}) => void

  @Prop() path!: Path

  albumDetail: AlbumDetail | {} = {}

  songList: Song[] = []

  nav = {
    list: [
      {label: "歌曲", count: 0},
      {label: "专辑信息", count: 0},
      {label: "评论", count: 0}
    ],

    activeLabel: "歌曲"
  }

  get isLike() {
    return this.like.album.findIndex(i => i.mid === this.path.mid) !== -1
  }

  handleToggleLike() {
    const albumDetail = this.albumDetail as AlbumDetail
    console.log(new AlbumItem(albumDetail.name, albumDetail.mid, albumDetail.singer, this.path.singerName as string, 0))
    this.toggleLike({type:"album", item: new AlbumItem(albumDetail.name, albumDetail.mid, albumDetail.singer, this.path.singerName as string, 0)})
  }

  fetchAlbumDetail() {
    qqMusicApi.getAlbumDetail(this.path.mid as number).then((ret: {data: any}) => {
      const i = ret.data
      this.albumDetail = new AlbumDetail(i.name, i.ar, i.publishTime, i.mid, i.company, i.desc)
    })
  }

  fetchAlbumSongList() {
    qqMusicApi.getAlbumSongs(this.path.mid as number).then(ret=>{
      this.songList = ret.data.list.map((item: any)=>({
        ...item,
        name: item.name,
        mid: item.mid,
        singer: item.singer,
        albumName: item.album.name,
        albumMid: item.album.mid,
      }))
    })
  }

  handlePlay() {
    (this.$refs.list as any).handlePlay(0)
  }

  mounted() {
    this.fetchAlbumDetail()
    this.fetchAlbumSongList()
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";

.album {
  overflow: auto;

  .title {
    font-weight: 600;
    font-size: 30px;
  }

  .infosArea {
    height: 260px;

    .content {
      overflow: hidden;
    }
  }

  .nav {
    li {
      padding: $pn $pl;
      margin-right: $mn;
      cursor: pointer;
    }

    .active {
      span {
        position: relative;
        color: $text-success;
      }

      span:after {
        content: "";
        width: 150%;
        height: 4px;
        background-color: white;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        border-radius: $border-radius-s;
        bottom: -6px;
      }
    }
  }

  .listArea {
  }
}


.ctrl {
  .btn {
    cursor: pointer;
    text-align: center;
    padding: $pn 0;
    margin-right: $mn;
    width: 120px;
    background-color: #826ec9;
    border-radius: $border-radius-lx;

    &:hover {
      background-color: #6043c4;
    }
  }
}
</style>
